
// Variables



// mixins
.scrollbar(){
    &::-webkit-scrollbar {
        width: 4px;
    }
    
    &::-webkit-scrollbar-track {
        background: #f8f8f8;
    }
    
    &::-webkit-scrollbar-thumb {
        background: #dadada;
        border-radius: 2px;
    }
}




//
.fileupload-ctn {
    position: relative;
    display: block;
    min-width: 800px;
    box-sizing: border-box;
    margin: 20px auto;
    padding: 24px 20px;
    font: 12px/1.30 "microsoft yahei";
    color: #333;
    border-radius: 4px;
    background: #fff;
    
    .upload-form {
        padding: 28px 0 18px;
        line-height: 32px;
        color: #808080;
        text-align: center;
        border-radius: 6px;
        border: 1px dashed #a7b5cb;
        background: #f4f9ff;
    }
    
    .upload-header {
        font-size: 14px;
    }
    
    .drag-tip{
        display: inline-block;
        padding-left: 40px;
        margin-right: 5px;
        vertical-align: top;
        color: #333;
        background: url(../images/fileup-upload.png) no-repeat left center;
    }
    
    .btn-upload {
        display: inline-block;
        margin-left: 5px;
        padding: 0 26px;
        vertical-align: top;
        color: #fff;
        border-radius: 16px;
        background: #015bf1;
        cursor: pointer;
    }
    
    .upload-desc {
        margin: 0;
    }
    
    .file-ul {
        list-style: none;
        width: 65%;
        max-height: 210px;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 6px 20px 6px 0;
        line-height: 20px;
        overflow-y: auto;
        .scrollbar();
        
        &:after {
            content: "";
            display: block;
            clear: both;
        }
        
        &.double {
            // 一行2个文件
            width: 100%;
            
            > li {
                display: inline-block;
                width: 47%;
                box-sizing: border-box;
                float: left;
                
                &:nth-child(2n+2){ float: right;}
            }
        }
        
        > li {
            padding: 10px 16px;
            border-bottom: 1px solid #f0f0f0;
            word-spacing: -5px;
        }
    }
    
    .file-name,
    .words-count {
        display: inline-block;
        box-sizing: content-box;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-spacing: normal;
        vertical-align: top;
    }
    
    .file-name {
        width: 40%;
        padding-right: 7%;
        
        &:before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 6px;
            margin-right: 8px;
            margin-top: 7px;
            vertical-align: top;
            border-radius: 50%;
            background: #ababab;
        }
    }
    
    .progress-wrap {
        display: inline-block;
        width: 30%;
        box-sizing: border-box;
        padding-right: 7%;
    }
    
    .progress-bar {
        display: inline-block;
        width: 45%;
        height: 6px;
        margin-right: 4%;
        margin-top: 7px;
        vertical-align: top;
        border-radius: 3px;
        background: #e5e5e5;
        overflow: hidden;
        
        .in {
            display: block;
            float: left;
            height: 100%;
            background: #abb5c5;
        }
    }
    
    .progress-per {
        display: inline-block;
        width: 50%;
        color: #808080;
    }
    
    .words-count {
        width: 15%;
    }
    
    .btn-close {
        float: right;
        width: 20px;
        height: 20px;
        background: url(../images/close.png) no-repeat 50% 0;
        cursor: pointer;
        
        &:hover {
            background-position: 0px -30px;
        }
    }
}
